<template>
<div v-show="divShow">
    <div class="zhezhao2" @click="QuitChoose"></div>
    <div class="zhezhao3" :style="BottomChange?'bottom: -30.5%;':''">
        <div style="text-align:center;margin-top:15px;font-size:18px">所在地区</div>
        <div style="text-align:center;font-size:12px">请选择完整的地区信息</div>
        <div class="div8">
            <div class="div9">
                <span class="span5" @click="Chosen(0)">{{ChooseProvince?ChooseProvince:'请选择'}}</span>
            </div>
            <div class="div9" style="margin-left:85px" v-show="ChooseProvince">
                <span class="span5" @click="Chosen(1)">{{ChooseCity?ChooseCity:'请选择'}}</span>
            </div>
            <div class="div9" style="margin-left:155px" v-show="ChooseProvince&&ChooseCity">
                <span class="span5" @click="Chosen(2)">{{ChooseArea?ChooseArea:'请选择'}}</span>
            </div>
            <div class="yesdiv" :style="yesBtn?'color: rgb(235, 57, 255);border: 0.7px solid rgb(235, 57, 255);':''" @click="OKBtn">
                <span>确定</span>
            </div>
        </div>
        <div class="div10" v-show="!ChooseProvince||BackChoose.province">
            <div class="div11" v-for="(data,index) in PlaceData.province" :key="index" 
            @click="ChoosePlace(0,data.name,data.code)">
                <span :style="ChooseProvinceYes==data.name?'color: rgb(44, 132, 255);border-bottom: 1px solid rgb(44, 132, 255);':''" class="ChooseYes">
                    {{data.name}}{{ChooseProvinceYes==data.name?'✓':''}}</span>
            </div>
        </div>
        <div class="div10" v-show="ChooseProvince&&!ChooseCity&&!BackChoose.province||BackChoose.city">
            <div class="div11" v-for="(data,index) in PlaceData.city" :key="index" 
            @click="ChoosePlace(1,data.name,data.code)">
                <span :style="data.name==ChooseCityYes?'color: rgb(44, 132, 255);border-bottom: 1px solid rgb(44, 132, 255);':''" class="ChooseYes">
                    {{data.name}}{{data.name==ChooseCityYes?'✓':''}}</span>
            </div>
        </div>
        <div class="div10" v-show="ChooseProvince&&ChooseCity&&!BackChoose.province&&!BackChoose.city||BackChoose.area">
            <div class="div11" v-for="(data,index) in PlaceData.area" :key="index" 
            @click="ChoosePlace(2,data.name,data.code)">
                <span :style="data.name==ChooseAreaYes?'color: rgb(44, 132, 255);border-bottom: 1px solid rgb(44, 132, 255);':''" class="ChooseYes">
                    {{data.name}}{{data.name==ChooseAreaYes?'✓':''}}</span>
            </div>
        </div>
        <!-- <div class="div10" v-show="ChooseProvince&&ChooseCity||BackChoose.area">
            <div class="div11" v-for="(data,index) in PlaceData.areaName" :key="index" 
            @click="ChoosePlace(2,data)">
                <span :style="data==ChooseArea?'color: rgb(44, 132, 255);border-bottom: 1px solid rgb(44, 132, 255);':''">
                    {{data}}{{data==ChooseArea?'✓':''}}</span>
            </div>
        </div> -->
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            divShow:0,
            PlaceData:{
                privenceName:['北京市','天津市','河北省','山西省',
                '内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市',
                '江苏省','浙江省','安徽省','福建省','江西省','山东省',
                '河南省','湖北省','湖南省','广东省','广西壮族自治区',
                '海南省','重庆市','四川省','贵州省','云南省','西藏自治区',
                '陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区',
                '台湾省','香港特别行政区','澳门特别行政区'],
                cityName:['福州市','厦门市','莆田市','三明市','泉州市',
                '漳州市','南平市','龙岩市','宁德市'],
                areaName:['市辖区','思明区','海沧区','湖里区','集美区',
                '同安区','翔安区'],
                province:[],
                city:[],
                area:[],
            },
            BottomChange:0,
            ChooseProvince:'',
            ChooseCity:'',
            ChooseArea:'',
            BackChoose:{'province':0,'city':0,'area':0},
            yesBtn:0,
            SubmitArea:'',
            ChooseProvinceYes:'',
            ChooseCityYes:'',
            ChooseAreaYes:'',
        }
    },
    methods:{
        QuitChoose(){
            this.divShow=0
        },
        ChoosePlace(index,place,code){
            this.BackChoose={'province':0,'city':0,'area':0}
            this.yesBtn=0
            switch (index) {
                case 0:this.ChooseProvinceYes=place
                this.ChooseProvince=''
                setTimeout(() => {
                    this.ChooseProvince=place
                }, 300);
                this.$addr.get(`district`,{
                    params:{
                        code:code
                    }
                }).then(
                    response=>{
                        console.log('市县请求成功',response.data);
                        this.PlaceData.city=response.data.data
                    },
                    error=>{
                        this.$message({
                            message:'市县请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("市县请求失败",error.message);
                    }
                )
                    break;
                case 1:this.ChooseCityYes=place
                this.ChooseCity=''
                setTimeout(() => {
                    this.ChooseCity=place
                }, 300);
                this.$addr.get(`district`,{
                    params:{
                        code:code
                    }
                }).then(
                    response=>{
                        console.log('区镇请求成功',response.data);
                        this.PlaceData.area=response.data.data
                    },
                    error=>{
                        this.$message({
                            message:'区镇请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("区镇请求失败",error.message);
                    }
                )
                    break;
                case 2:this.ChooseAreaYes=place
                this.ChooseArea=place
                    break;
                default:
                    break;
            }
        },
        Chosen(index){
            this.BackChoose={'province':0,'city':0,'area':0}
            switch (index) {
                case 0:this.BackChoose.province=1
                    break;
                case 1:this.BackChoose.city=1
                    break;
                case 2:this.BackChoose.area=1
                    break;
                default:
                    break;
            }
        },
        OKBtn(){
            if(this.yesBtn){
                this.divShow=0
                if(this.ChooseArea.indexOf('　') != -1){
                    this.SubmitArea=this.ChooseArea.slice(0,this.ChooseArea.indexOf('　'))+this.ChooseArea.slice((this.ChooseArea.indexOf('　')+1))
                }else if(this.ChooseArea == '市辖区'){
                    this.SubmitArea=''
                }else{
                    this.SubmitArea=this.ChooseArea
                }
                if(this.ChooseCity=='市辖区'||this.ChooseCity=='市'||this.ChooseCity=='县'){
                    this.$bus.$emit('Chosen',this.ChooseProvince,'',this.SubmitArea)
                }else{
                    this.$bus.$emit('Chosen',this.ChooseProvince,this.ChooseCity,this.SubmitArea)
                }
                
            }
        }
    },
    watch:{
        divShow(value){
            if(value){
                setTimeout(() => {
                    this.BottomChange=1
                }, 20);
                // let num=-100
                // this.BottomChange='bottom:'+num+'%;'
                // var id=setInterval(() => {
                //     num+=3
                //     this.BottomChange='bottom:'+num+'%;'
                //     if(num > -32){
                //         clearInterval(id)
                //     }
                // }, 8);
            }else{
                this.BottomChange=0
            }
        },
        ChooseProvince(){
            this.ChooseCity=''
        },
        ChooseCity(){
            this.ChooseArea=''
        },
        ChooseArea(value){
            if(value){
                this.yesBtn=1
            }
        },
        ChooseProvinceYes(){
            this.ChooseCityYes=''
        },
        ChooseCityYes(){
            this.ChooseAreaYes=''
        }
    },
    mounted(){
        this.$bus.$on('chooseAreaShow',(divShow)=>{
            this.divShow=divShow
        })
        this.$addr.get(`district?code=86`).then(
            response=>{
                console.log('省份请求成功',response.data);
                this.PlaceData.province=response.data.data
            },
            error=>{
                this.$message({
                    message:'省份请求失败，请重新登陆',
                    type:'error'
                })
                console.log("省份请求失败",error.message);
            }
        )
    },
    beforeDestroy(){
        this.$bus.$off('chooseAreaShow')
    }
}
</script>

<style scoped>
.ChooseYes{
    color: rgb(0, 0, 0);
    border-bottom: 0px solid rgb(44, 132, 255);
    transition: color .2s ease-out, border-bottom .2s ease-out;
}
.yesdiv{
    position: absolute;
    right: 25px;
    margin-top: -26px;
    padding: 5px;
    padding-right: 8px;
    padding-left: 8px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: rgb(224, 224, 224);
    border: 0.7px solid rgb(224, 224, 224);
}
.div11{
    padding-left: 26px;
    padding-top: 10px;
    padding-bottom: 13px;
    width: 70%;
}
.div10{
    height: 52%;
    overflow-y: auto;
    margin-top: 5px;
    /* 解决ios出现卡顿的情况 */
    -webkit-overflow-scrolling: touch;
    /* 这个很重要，没有加只能局部接触滚动 */
    position: relative;
}
.div8{
    padding-bottom: 5px;
    border-bottom: 0.7px solid rgb(224, 224, 224);
    margin-left:10px;
    margin-right: 10px;
    margin-top:35px;
    color: rgb(198, 101, 255);
}
.div9{
    /* background-color: rgb(233, 213, 213); */
    width: 60px;
    margin-left: 15px;
    margin-top: -20px;
    padding-left: 5px;
    padding-right: 5px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.span5{
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 1px solid rgb(198, 101, 255);
    padding-bottom: 5px;
}
.zhezhao3{
    width: 100%;
    height: 100%;
    background-color: white;
    position: fixed;
    z-index: 3;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    font-size: 14px;
    bottom: -100%;
    transition: bottom 0.45s ease-in-out;
}
.zhezhao2{
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.35;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
</style>